import React, { useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import {
  useFormatCommon, useFormatMessage, Page, Header, HeaderButtons, Content as PageContent, Breadcrumb, axios,
  mailApi,
} from '@choerodon/master';
import {
  useModal, Modal as ModalInstance,
} from 'choerodon-ui/pro';
import OperationForm from './components/operationForm';
import { useStore } from './stores/index';
import './index.less';

const modalkey1 = ModalInstance.key();

export interface Props {

}

const Content: React.FC<Props> = (props) => {
  const {
    intlPrefix, prefixCls, formDs, level,
  } = useStore();
  const formatCommon = useFormatCommon();
  const formatMessage = useFormatMessage(intlPrefix);
  const Modal = useModal();
  const handleEdit = () => {
    Modal.open({
      key: modalkey1,
      title: '修改邮件模板',
      // @ts-ignore
      children: <OperationForm refresh={refresh} prefixCls={prefixCls} recordData={formDs?.current} level={level} />,
      drawer: true,
      style: { width: 1060 },
      okText: '保存',
    });
  };

  const refresh = () => {
    initPage();
  };

  const headerBtns = () => [
    {
      name: '修改',
      icon: 'edit-o',
      handler: handleEdit,
    },
  ];

  const initPage = async () => {
    await formDs.query();
    const res = await mailApi.mailTemplatePreview({
      logo: formDs?.current?.get('logo'),
      slogan: formDs?.current?.get('slogan'),
      footer: formDs?.current?.get('footer'),
    });
    formDs?.current?.set('preview', res);
  };

  useEffect(() => {
    initPage();
  }, []);

  return (
    <Page service={[]}>
      <Header>
        <HeaderButtons items={headerBtns()} />
      </Header>
      <Breadcrumb />
      <PageContent className={`${prefixCls}-page-content`}>
        {
          level === 'organization'
          && (
            <div className={`${prefixCls}-row-item`} style={{ marginTop: 8 }}>
              <div className="label">
                邮件模板设置
              </div>
              <div className={`${prefixCls}-row-item-text`}>
                {formDs?.current?.get('custom') ? '自定义邮件模板' : '沿用平台邮件模板'}
              </div>
            </div>
          )
        }

        <div className={`${prefixCls}-row-item`} style={{ marginTop: 28 }}>
          <div className="label">
            邮件Logo
          </div>
          <div className={`${prefixCls}-row-item-logo`}>
            <img src={formDs?.current?.get('logo')} alt="" className="img-logo" />
          </div>
        </div>

        <div className={`${prefixCls}-row-item`} style={{ marginTop: 24 }}>
          <div className="label">
            邮件标语
          </div>
          <div
            className={`${prefixCls}-row-item-text`}
          >
            {formDs?.current?.get('slogan')}
          </div>
        </div>

        <div className={`${prefixCls}-row-item`} style={{ marginTop: 16 }}>
          <div className="label">
            邮件页脚
          </div>
          <div className={`${prefixCls}-row-item-footer row-grow`} dangerouslySetInnerHTML={{ __html: formDs?.current?.get('footer') }} />
        </div>

        <div className={`${prefixCls}-row-item`} style={{ marginTop: 30 }}>
          <div className="label">
            预览
          </div>
          <div
            className={`${prefixCls}-row-item-preview row-grow`}
            dangerouslySetInnerHTML={{ __html: formDs?.current?.get('preview') }}
          />
        </div>
      </PageContent>
    </Page>
  );
};

export default (observer(Content));
